<template>
    <div>
    <div class="head" @click="search">
              <div class="ips">
              <span class="bg"></span>
         <p>请输入搜索关键字</p>
        </div>
    </div>
    <div class="content">
        <div class="left" v-show="!showflag">
            <van-sticky :offset-top="50" @change="testCe"  >
 
           <ul> 
           <li @click='showindex=1' :class="{con:showindex==1}">
                   手机数码
                </li>
                <li  @click='showindex=2' :class="{con:showindex==2}" >
                    服饰鞋包
                 </li>
                 <li  @click='showindex=3' :class="{con:showindex==3}">
                   教育文具
                 </li>
            </ul>
           </van-sticky>
        </div>
        <div class="left" v-show="showflag">
            <van-sticky :offset-top="50" @change="testCe"  >
 
           <ul class="updata"> 
           <li @click='showindex=1' :class="{con:showindex==1}">
                   手机数码
                </li>
                <li  @click='showindex=2' :class="{con:showindex==2}" >
                    服饰鞋包
                 </li>
                 <li  @click='showindex=3' :class="{con:showindex==3}">
                   教育文具
                 </li>
            </ul>
           </van-sticky>
        </div>
        <div class="right" v-show="showindex==1">
            <div class="top">
                <img src="https://resource.smartisan.com/resource/9300be71ef2851bade39bc8a383d5524.jpg" alt="">
            </div>
            <h1> 坚果手机</h1>
            <div class="middle">
                <ul>
                    <router-link tag="li" to="/list">
                        <img src="https://resource.smartisan.com/resource/4d9e7683b590cf4a6996d3b13136bcf8.png" alt="">
                        <p> 坚果R2</p>
                    </router-link >
                </ul>
            </div>
            <h1> 手机配件</h1>
            <div class="middle">
                <ul>
                    <router-link tag="li" to="/list">
                        <img src="https://resource.smartisan.com/resource/933ea337a2cd0069117b9cfcd4170ed0.jpg" alt="">
                        <p> 手机壳</p>
                    </router-link>
                    <router-link tag="li" to="/list">
                        <img src="https://resource.smartisan.com/resource/8e822aa7cbab24fec7eacf0bbb2f6526.jpg" alt="">
                        <p> 线材</p>
                    </router-link >
                    <router-link tag="li" to="/list">
                        <img src="https://resource.smartisan.com/resource/a668d1a5f41b04ece82d76ded1e94d3a.jpg" alt="">
                        <p> 充电器</p>
                    </router-link >
                    <router-link tag="li" to="/list">
                        <img src="https://resource.smartisan.com/resource/e991f946530a7cfab3d9670dd8b1371b.png" alt="">
                        <p> 蓝牙耳机</p>
                    </router-link >
                    <router-link tag="li" to="/list">
                        <img src="https://resource.smartisan.com/resource/d159521e479b26f3c97a1e4f00a5aefd.jpg" alt="">
                        <p> 耳机耳麦</p>
                    </router-link >
                    <router-link tag="li" to="/list">
                        <img src="https://resource.smartisan.com/resource/003bd205a42d0701d481353eaba3cd03.jpg" alt="">
                        <p> 手机支架</p>
                    </router-link >
                </ul>
            </div>
            <h1> 官方配件</h1>
            <div class="middle">
                <ul>
                    <router-link tag="li" to="/list">
                        <img src="https://resource.smartisan.com/resource/9368c948ea81a5b8bc2efa165488ccc6.jpg" alt="">
                        <p> 手机壳</p>
                    </router-link >
                      <router-link tag="li" to="/list">
                        <img src="https://resource.smartisan.com/resource/82aab62886740f165a3631ce6cffe895.jpg" alt="">
                        <p> 数据线</p>
                    </router-link>
                      <router-link tag="li" to="/list">
                        <img src="https://resource.smartisan.com/resource/a668d1a5f41b04ece82d76ded1e94d3a.jpg" alt="">
                        <p>充电器</p>
                    </router-link >
                      <router-link tag="li" to="/list">
                        <img src="https://resource.smartisan.com/resource/e991f946530a7cfab3d9670dd8b1371b.png" alt="">
                        <p> 蓝牙耳机</p>
                    </router-link>
                </ul>
            </div>
            <h1> TNT</h1>
            <div class="middle">
                <ul>
                    <router-link tag="li" to="/list">
                        <img src="https://resource.smartisan.com/resource/4fc4edc5973be10c3d221c592e760063.png" alt="">
                        <p> 坚果R2</p>
                    </router-link >
                     <router-link tag="li" to="/list">
                        <img src="https://resource.smartisan.com/resource/79c58355d2f5fd53988684b96d405f9b.png" alt="">
                        <p> 坚果R2</p>
                    </router-link >
                     <router-link tag="li" to="/list">
                        <img src="https://resource.smartisan.com/resource/c9a55fe8b5bc506fec60659aa2dcebe9.png" alt="">
                        <p> 坚果R2</p>
                    </router-link>
                     <router-link tag="li" to="/list">
                        <img src="https://resource.smartisan.com/resource/49744cbd5e65047aeae623a6dde5610c.png" alt="">
                        <p> 坚果R2</p>
                    </router-link >
                     <router-link tag="li" to="/list">
                        <img src="https://resource.smartisan.com/resource/8b0fe3117164dab7d91439b93dc112e0.png" alt="">
                        <p> 坚果R2</p>
                    </router-link>
                </ul>
            </div>
        </div>
        <div class="right" v-show="showindex==2">
            <div class="top">
                <img src="https://resource.smartisan.com/resource/e2b4f77fb6879b7692be6f79cf843e92.png" alt="">
            </div>
            <h1>箱包</h1>
            <div class="middle">
                <ul>
                    <li>
                        <img src="https://resource.smartisan.com/resource/15d0ee0615b496b9c455498e6385dce6.jpg" alt="">
                        <p> 背包</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="right" v-show="showindex==3">
            <div class="top">
                <img src="https://resource.smartisan.com/resource/4d0b717c854472bbe8e5f647a55e6665.png" alt="">
            </div>
            <h1>箱包</h1>
            <div class="middle">
                <ul>
                    <li>
                        <img src="https://resource.smartisan.com/resource/15d0ee0615b496b9c455498e6385dce6.jpg" alt="">
                        <p> 背包</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <buttomtag  ></buttomtag>
    </div>
</template>

<script>
import buttomtag from "../components/TestoCom.vue";
    export default {
        data() {
            return {
                showindex:1,
                showflag:false ,
                buttomindex:null,
        
            }
        },
        methods: {
            testCe(isFixed){
                this.showflag=isFixed
            },
            search(){
                this.$router.push('/search')
            }
            
            
        },
         components: {
    buttomtag,
  },
   created() {
  },
        
    }
</script>

<style lang="scss" scoped>
.head{
    width: 100%;
     position: fixed;
     top: 0;
     background-color: #ffffff;
     height: 46px;
   .ips{
    width: 95%;
    margin: 7px auto;
    background-color: #f5f5f5;
    height: 32px;
    border-radius: 20px;
    line-height: 32px;
    display: flex;
    z-index: 5;
   
    span{
        display: inline-block;
        margin-left: 5px;
        margin-right: 5px;
        width: 32px;
        height: 32px;
        background: url(../assets/img/search.png) 3px 2px no-repeat;
        background-size: 88%;
    }
    p{
     
        color: #b3b3b3;
        font-size: 13px;
    }
}
}
.content{
   width: 100%;
   display: flex;
   margin-top: 48px;
   .left{
    border-top: 1px solid #dfdede;
    
    width: 23%;
    list-style: none;
    height: 100vh;
    overflow: hidden;
   
     ul{
        margin-top: 30px;
        list-style: none;
        li{
            width: 80%;
            height: 25px;
            line-height: 25px;
            margin: 0 auto;
            margin-bottom: 20px;
            padding: 0px 3px;
            text-align: center;
            color: rgba(0,0,0,.6);
            font-size: 14px;
            font-weight: 600;
        }
        .con{
            background-color: #f6ebea;
            color: #dc726a;
            border-radius: 5px;
            font-weight: 700;
        }
     }
     .updata{
        li{
            width: 18%;
            position: relative;
            left: -145px;
            top:-5px
        }
     }
   }
   .right{
    width: 77%;
    border-top: 1px solid #dfdede;
    border-left: 1px solid #dfdede;
  
    .top{
        width: 95%;
        height: 100px;
        border-radius: 10px;
        overflow: hidden;
        margin: 0 auto;
        margin-top: 20px;
        background-color:#dc726a;
        img{
            width: 100%;
            height: 100%;
            
        }
    }
    h1{
        font-size: 17px;
        margin-top: 40px;
        margin-left: 20px;
        color: rgba(0,0,0,.8);
        font-weight: 700;
    }
    .middle{
        width: 100%;
         padding-bottom: 70px;
        
        ul{
            width: 100%;
            list-style: none;
            display: flex;
            // justify-content: space-around;
            flex-wrap: wrap;
            margin-top: 20px;
            li{ 
                font-size: 13px;
                text-align: center;
                width: 29%;
                padding-bottom: 5px;
                margin-left: 10px;
                
                img{
                    display: block;
                    width: 100%;
                    background-color: #f6f6f6;
                    border-radius: 10px;
                }
                p{
                    color: #333;
                    font-weight: 700;
                    margin-top: 5px;
                    font-size: 12px;
                }
            }
            
        }
    }
   }
}


</style>